//客服工作台css
* {
  padding: 0;
  margin: 0;
}

.box {
  display: flex;
  //好友列表
  .dialogue_list {
    width: 23vw;
    height: 75vh;
    overflow-y: auto; /* 设置为自动滚动 */
    //好友列表
    ul {
      height: auto;
      padding-right: 15px;
      border-bottom: 1px solid #b4b4b4;
      box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.5);
      li {
        padding: 20px 20px 10px;
        border-bottom: 1px solid #b4b4b4;
        display: flex;
        img {
          border: 1px solid #5f5f5f;
          width: 50px;
          height: 50px;
          border-radius: 50%;
        }
        .right {
          margin-left: 15px;
          div {
            display: flex;
            p {
              max-width: 120px;
              font-size: 16px;
              color: #2f3233;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            span {
              font-size: 8px;
              margin-left: 10px;
              background: #f96391;
              color: #fff;
              width: 22px;
              height: 22px;
              text-align: center;
              line-height: 22px;
              border-radius: 50%;

            }
          }
          .p_content {
            color: #919493;
            max-width: 120px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
      .select_li{
        background: #cfdde7;
      }
    }
  }
  //自定义滚动条样式
  .dialogue_list::-webkit-scrollbar {
    width: 10px;
  }
  .dialogue_list::-webkit-scrollbar-track {
    background-color: #f1f1f1;
  }
  .dialogue_list::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 5px;
  }
  //右侧部分
  .rigth_section {

    width: 80%;
    //页头
    .top_box {

      ul {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 20px;
        li {
          margin-left: 15px;
          a {
            i {
              font-size: 20px;
            }
          }
        }
      }
    }
    //聊天窗+常用功能
    .bottom_box {
      display: flex;
      //聊天窗口
      .chat_box {
        width: 100%;
        height: 100%;
        background: #e9edf2;
        //聊天记录
        .chatting_records_box {
          padding-top: 15px;
          width: 100%;
          height: 50vh;
          /* 去掉滚动条 */
          overflow: auto;
          -ms-overflow-style: none; /* IE 10+ */
          overflow: -moz-scrollbars-none; /* Firefox */
          //消息
          .msg_box {
            display: flex;
            margin-bottom: 15px;
            align-items: center;
            //头像
            .pic {
              margin: 10px;
              display: flex;
              flex-direction: column;
              align-items: center;
              img {
                width: 35px;
                height: 35px;
                border-radius: 50%;
              }
              span {
                color: #9fa2a7;
                font-size: 8px;
              }
            }
            //文本消息类型
            .msg_text {
              max-width: 45%;
              border-radius: 5px;
              padding: 5px 10px;
              font-size: 14px;
              p {
                word-break: break-all;
                height: 100%;
                line-height: 1.5;
              }
              a {
                img {
                  width: 150px;
                  height: 150px;
                  object-fit: contain;
                }
              }
            }
            //文本类型
            .msg_text_left {
              background: #ffffff;
              p {
                color: #7a7b7f;
              }
            }
            .msg_text_right {
              background: #52a9fe;
              p {
                color: #f9f9f9;
              }
            }
            //链接类型
            .msg_link {
              width: 350px;
              border-radius: 5px;

              padding: 10px;
              display: flex;
              background: #fff;
              img {
                width: 80px;
                height: 80px;
                border-radius: 5px;
              }
              .right {
                margin-left: 10px;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                p {
                  width: 50%;
                  font-size: 15px;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
                span {
                  width: 50%;

                  font-size: 8px;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
                a {
                  margin-top: 5px;
                  width: 100px;
                }
              }
            }
            //图片类型
            .msg_img_right {
              display: flex;
              justify-content: flex-end;
            }
          }
          .right_msg_box {
            display: flex;
            justify-content: flex-end;
          }
        }
        .chatting_records_box::-webkit-scrollbar {
          width: 0 !important
        }
        //输入框盒子
        .input_box {
          padding: 15px 20px;
          border-top: 1px solid #d7dae0;
          display: flex;
          flex-direction: column;
          .top_box {
            position: relative;
            display: flex;
            li {
              margin-right: 25px;
              a {
                img {
                  width: 18px;
                  height: 18px;
                }
              }
            }
            //表情列表
            .emoji_box {
              padding: 5px;
              position: absolute;
              top: -130px;
              left: 0px;
              background: #fff;
              width: 100%;
              display: flex;
              flex-wrap: wrap;
              a {
                margin: 5px;
                display: inline-block;
                font-size: 18px;
              }
              .clse {
                position: absolute;
                top: -2px;
                right: -5px;
              }

            }
          }
          .centre_box {
            textarea {
              padding: 10px 0;
              background: #e9edf2;
              width: 100%;
              height: 8vh;
              border: 0px;
              resize: vertical;
              font-size: 16px;
            }
          }
          .bottmo_box {
            display: flex;
            justify-content: flex-end;
            button {
              padding: 0px 18px;
            }
          }
        }

      }
      //常用功能
      .commonly_box {
      }
    }
  }
}